<!--授权界面-->
<template>
  <Main :type="'ordinary'">
    <!-- <Title :title="'微信授权'" /> -->
    <el-steps
      id="stepsWX"
      :active="1"
      finish-status="success"
      style="padding:30px 150px;"
    >
      <el-step title="授权" icon=""></el-step>
      <el-step title="更新" icon=""></el-step>
      <el-step title="预览" icon=""></el-step>
      <el-step title="发布" icon=""></el-step>
    </el-steps>
    <div class="grid-rt">
      <dl style="font-size: 20px;">
        <dt v-if="staus === '已经是最新版本'">当前版本为 v{{ version }}</dt>
        <dt v-else>请更新至 v{{ newVersion }}</dt>
      </dl>
      <dl>
        <dt>
          注：更新成功后，请重新发布！
        </dt>
      </dl>
    </div>

    <Footer>
      <el-button
        type="primary"
        round
        :disabled="staus === '已经是最新版本'"
        @click="submitFn"
        >更新</el-button
      >
    </Footer>
  </Main>
</template>

<script>
import { CHECK_VERSION, UPDATE_VERSION } from "./service";

export default {
  name: "Wxchat",
  filters: {
    stausu(value) {
      return value === "authorized" ? "已授权" : "授权";
    }
  },
  data() {
    return {
      staus: "",
      version: "",
      newVersion: ""
    };
  },
  created() {
    this.init();
  },
  methods: {
    async init() {
      await CHECK_VERSION().then(({ code, data }) => {
        if (code === 200) {
          this.staus = data.data;
          this.version = data.version;
          this.newVersion = data.new_version;
        }
      });
    },
    async submitFn() {
      await UPDATE_VERSION().then(({ code, msg }) => {
        if (code === 200) {
          this.init();
        }
        this.$message({
          message: msg,
          type: code === 200 ? "success" : "error"
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.grid-rt {
  text-align: center;
  background-color: #fff;
  margin-top: 10px;
  padding-top: 30px;
  font-size: 12px;
  dl:nth-child(2) {
    margin-top: 40px;
  }
  dt {
    font-family: PingFangSC-Semibold;
    color: #001529;
  }
  dd {
    padding: 5px 0;
  }
}
</style>
<style>
#stepsWX .el-step__head.is-success {
  color: #409eff;
  border-color: #409eff;
}
#stepsWX .el-step__title.is-success {
  color: #409eff !important;
}
</style>
